<template>
	<view class="modal-component" v-if="props.show" :style="props.modalStyle">
		<view class="mask" @click="onMask"></view>
		<view class="content">
			<slot></slot>
			<slot name="footer"></slot>
			<slot name="close"></slot>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	
	interface ModalProps {
		show: boolean,
		clickMaskCose: boolean,
		modalStyle: {
			[k in string]: any
		}
	}
	const props = withDefaults(defineProps<() => ModalProps>(), {
		show: false,
		clickMaskClose: false,
		modalStyle:{}
	})
	
	console.log('modalProps', props.modalStyle)

	
	const emit = defineEmits(["onClose"])

	const onMask = () => {
		console.log("clickMaskClose", props.clickMaskClose)
		if(props.clickMaskClose){
			emit("onClose")
		}
	}

</script>

<style scoped lang="scss">
	.modal-component{
		position: fixed;
		z-index: 3000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		min-width: 100vw;
		min-height: 100vh;
		.mask{
			position: fixed;
			z-index: 3000;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			min-width: 100vw;
			min-height: 100vh;
			background-color: rgba(0, 0, 0, 0.7);
		}
		.content{
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			z-index: 3001;
			width: 100%;
			height: 100%;
		}
	}
</style>